<script setup lang="ts">
import { find } from "lodash";
import { useMap } from "@/views/pipe-network/components/Map/index.vue";
import { ref } from "vue";
import { LPolyline, LCircle, LMarker } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePolyline, queryPolylines } from "@/api/pipe";
import { getAssetsFile } from "@/utils/map";
import { useLocalStore } from "@/views/layer/gismap/store";
import DangerAPI from "@/api/DangerAPI";
import moment from "moment";
import LineAPI from "@/api/LineAPI";
const { L }: any = window;
const props = defineProps({
  deviceCategoryList: Array<any>,
  inspUserPosition: Array<any>,
});

const inspUserPositionData = ref([]);
const dialogVisible = ref<boolean | number>(false);
const polylineListRef = ref([]);
const circleMarkerPositionRef = ref();
const activePolylineRef = ref();
const map = useMap();
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { visibleLineClassIds } = storeToRefs(localStore);
let timer;

const getWeight = (lineId) => {
  if (!activePolylineRef.value) {
    return 4;
  } else {
    return 4;
  }
};

const getColor = (classId: string) => {
  const lineCategoryList = props.deviceCategoryList?.line;
  if (lineCategoryList) {
    const obj = lineCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      return image;
    }
  }
};

const getAllLines = () => {
  let params = {
    StartTime: moment(localStore.postionTime[0]).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(localStore.postionTime[1]).format("YYYY-MM-DD 23:59:59"),
  };

  DangerAPI.api_insp_task_user_position(params).then(({ data, succeeded }) => {
    if (succeeded) {
      polylineListRef.value = data.map((item: any) => {
        let tempArr = [];
        if (item.positions.length) {
          item.positions.forEach((ele, eleIndex) => {
            tempArr.push([ele.latitude, ele.longitude]);
          });
        }
        return {
          ...item,
          startPoint: [tempArr[0][0], tempArr[0][1]],
          coordinates: tempArr,
        };
      });
    }
  });
};

onMounted(() => getAllLines());

watch(
  () => localStore.postionTime,
  () => {
    getAllLines();
  }
);
</script>

<template v-if="positionRef">
  <LPolyline
    :key="inspUserId"
    v-for="{ coordinates, inspUserId } in polylineListRef"
    :lat-lngs="coordinates"
    weight="4"
    :attribution="{ inspUserId }"
    color="#000"
    :dashArray="[2, 10]"
  />
</template>

<style scoped lang="scss"></style>
